// 引入UI
import CountUI from '../../components/CountUI'
// 引入store
// import store from '../../components/redux/store'
import { createAddAction, createReduceAction, createAsyncAddAction, createAsyncReduceAction } from '../../components/redux/count_action';
// 引入 react-redux 连接
import { connect } from 'react-redux'

// 当store当中封装的reducer对象发生改变后，此处取值也许进行相对应的改变
const mapState = (state) => { return { count: state.count , person:state.person } }
const mapDispatch = (dispatch) => {
    return {
        /**
         * 直接通过对象方式给add指定到createAddAction 更加简便 只需对对应的参数进行预处理
        */
        add: (value) => { dispatch(createAddAction(Number(value))) },
        reduce: (value) => { dispatch(createReduceAction(Number(value))) },
        asyncAdd: (value) => { dispatch(createAsyncAddAction(Number(value), 1000)) },
        asyncReduce: (value) => { dispatch(createAsyncReduceAction(Number(value), 1000)) },
    }
}
// 创建连接
// 默认入参为两个函数，第一个函数为状态，第二个函数为操作状态的方法
const CountUIContainer = connect(mapState, mapDispatch)(CountUI)

export default CountUIContainer